<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加减计数器</title>
    <script src="js/vue.global.js"></script>
    <link rel="stylesheet" href="css/counter.css">
    <link rel="stylesheet" href="css/star.css">
</head>
<body>
    <div id="app">
        <my-counter :value="1" :min="0" :max="10"></my-counter>
        <my-counter @update:value="update"></my-counter>
        <my-counter></my-counter>
        <my-star v-model:value="r1"></my-star>
        父组件：{{ r1 }}
        <my-star :value="3"></my-star>
        <my-star></my-star>
    </div>
    <script src="js/counter.js"></script>
    <script src="js/star.js"></script>
    <script>
        Vue.createApp({
            components: {
                'my-counter': Counter,
                'my-star': Star
            },
            data() {
                return {
                    r1: 5 // 初始评分
                };
            },
            methods: {
                updateRate(value) {
                    this.r1 = value;
                },
                update(value) {
                    alert(value);
                }
            }
        }).mount('#app');
    </script>
</body>
</html>